<template>
  <u-mask :show="show" :zoom="false" @click="closeLeeson()">
    <view class="lesson" @click.stop>
      <view class="lesson_title">
        <view
          class="lesson_title_text"
          :class="{ active: isAllCourses }"
          @click="allLesson()"
        >
          所有课程
        </view>
        <view
          class="lesson_title_text"
          :class="{ active: !isAllCourses }"
          @click="myLesson()"
        >
          我的收藏
        </view>
      </view>
      <view class="lesson_container">
        <view class="lesson_content">
          <view class="lesson_name">
            <text>学段</text>
          </view>
          <view class="lesson_list">
            <view
              class="lesson_item"
              :class="{ active: period === '1' }"
              @click="chooseLesson('1')"
            >
              <text>小学</text>
            </view>
            <view
              class="lesson_item"
              :class="{ active: period === '2' }"
              @click="chooseLesson('2')"
            >
              <text>初中</text>
            </view>
            <view
              class="lesson_item"
              :class="{ active: period === '3' }"
              @click="chooseLesson('3')"
            >
              <text>高中</text>
            </view>
          </view>
        </view>
        <view class="lesson_content">
          <view class="lesson_name">
            <text>版本</text>
          </view>
          <view class="lesson_list">
            <scroll-view class="lesson_scroll" scroll-y="true">
              <view
                class="lesson_item"
                v-for="(item, index) in editionList"
                :key="index"
                @click="chooseGrade(item, index)"
                :class="{ active: currentEdition === index }"
              >
                <text>{{ item }}</text>
              </view>
            </scroll-view>
          </view>
        </view>
        <view class="lesson_content">
          <view class="lesson_name">
            <text>教材(</text>
            <text class="active">长按课程选课</text>
            <text>)</text>
          </view>
          <view class="lesson_list">
            <scroll-view class="lesson_scroll" scroll-y="true">
              <view
                class="lesson_item lesson_item_active"
                :class="{ active: currentGrade === index }"
                v-for="(item, index) in bookYearList"
                :key="index"
                @click="selectLeeson(index)"
                @longtap="determineLesson(item)"
              >
                <text>{{ item.bookYear }}</text>
                <view class="lesson_stars" @click.stop="collectLesson(item)">
                  <image
                    v-if="item.collect"
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/stars-active.png"
                    mode="widthFix"
                  ></image>
                  <image
                    v-else
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/stars.png"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
  </u-mask>
</template>

<script>
import { getAllBook, addUserLearningBook } from "@/api/sync";
export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    module: {
      type: String,
      default: "1",
    },
  },
  watch: {
    show: {
      handler(newName, oldName) {
        if (newName) {
          this.chooseLesson();
        }
      },
    },
  },
  created() {},
  data() {
    return {
      bookYearList: [],
      editionList: [],
      period: "1",
      currentEdition: 0,
      currentGrade: 0,
      isAllCourses: true,
    };
  },
  methods: {
    chooseLesson(id) {
      if (id) {
        this.period = id;
        this.currentEdition = 0;
        this.currentGrade = 0;
      } else {
        this.currentEdition = 0;
        this.currentGrade = 0;
      }
      let params = {
        module: this.module,
        period: this.period,
      };
      if (this.isAllCourses) {
        getAllBook(Object.assign(params, { filterFlag: false })).then((res) => {
          this.bookYearList = res.data.bookYearList || [];
          this.editionList = res.data.editionList || [];
        });
      } else {
        getAllBook(Object.assign(params, { filterFlag: true })).then((res) => {
          this.bookYearList = res.data.bookYearList || [];
          this.editionList = res.data.editionList || [];
        });
      }
    },
    closeLeeson() {
      this.$emit("close");
    },
    chooseGrade(item, index) {
      this.currentEdition = index;
      let params = {
        module: this.module,
        period: this.period,
        bookEdition: item,
      };
      if (this.isAllCourses) {
        getAllBook(Object.assign(params, { filterFlag: false })).then((res) => {
          this.bookYearList = res.data.bookYearList || [];
        });
      } else {
        getAllBook(Object.assign(params, { filterFlag: true })).then((res) => {
          this.bookYearList = res.data.bookYearList || [];
        });
      }
    },
    selectLeeson(index) {
      this.currentGrade = index;
    },
    determineLesson(item) {
      this.$emit("close");
      this.$emit("change", item.bookId);
    },
    allLesson() {
      this.isAllCourses = true;
      let params = {
        module: this.module,
        period: this.period,
        filterFlag: false,
      };
      getAllBook(params).then((res) => {
        this.bookYearList = res.data.bookYearList;
        this.editionList = res.data.editionList;
      });
    },
    myLesson() {
      this.isAllCourses = false;
      let params = {
        module: this.module,
        period: this.period,
        filterFlag: true,
      };
      getAllBook(params).then((res) => {
        if (res.data.editionList.length > 0) {
          this.bookYearList = res.data.bookYearList;
          this.editionList = res.data.editionList;
          if (this.currentEdition > this.editionList.length) {
            this.currentEdition = 0;
          }
          if (this.currentGrade > this.bookYearList.length) {
            this.currentGrade = 0;
          }
        } else {
          this.bookYearList = [];
          this.editionList = [];
        }
      });
    },
    collectLesson(item) {
      let collect = item.collect;
      let params = {
        bookId: item.bookId,
      };
      addUserLearningBook(params).then(() => {
        this.$set(item, "collect", !collect);
      });
    },
    toJSON() {},
  },
};
</script>

<style lang="scss" scoped>
@import "./Lesson.scss";
</style>
